<template>
  <div>
    <h2 v-color="c" v-hello="'yellow'">App组件</h2>
    <input type="text" v-focus />
    <MyLeft :uname="uname" />
    <MyRight />
  </div>
</template>

<script>
import MyLeft from '@/components/MyLeft.vue'
import MyRight from '@/components/MyRight.vue'

export default {
  data () {
    return {
      c: 'blue',
      uname: 'zhangsan'
    }
  },
  components: { MyLeft, MyRight },
  methods: {
    del () {
      console.log(222222)
    }
  },
  // 自定义指令
  directives: {
    // ------------------ 钩子函数的执行时机和作用 ----------------------
    // bind     -- 只执行一次，在元素插入到父节点之前执行。此时元素的父节点是null
    //          -- 它执行的时机是最早的，元素还没有真正渲染到浏览器
    //          -- 可以在里面进行一些初始化的操作，比如设置一些初始的样式

    // inserted -- 只执行一次，在元素插入到父节点之后执行，此时元素的父节点不是null
    //          -- 言外之意，元素已经成功的渲染到了浏览器
    //          -- 可以在里面进行DOM操作了，比如让元素获取焦点
    // --------------------------------------------------------------
    // 自定义指令，如果只有bind和update两个方法，并且两个方法的逻辑完全一样，则可以写成函数格式
    // color (el, obj) {
    //   el.style.color = obj.value
    // }
    color: {
      // bind只执行一次。
      bind (el, obj) {
        console.log(11)
        // el 就是使用指令的元素
        // obj里面包括指令的其他详细信息，当然也包括指令的值（obj.value）
        el.style.color = obj.value
      },
      // 指令绑定的值更新后执行
      update (el, obj) {
        console.log(22)
        el.style.color = obj.value
      }
    },
    focus: {
      inserted (el) {
        el.focus()
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
